<template>
  <div class="banner">
    <div class="ban">
      <img @click="handleDetailClick" src="//img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_600x330_5ff0b4e8.jpg"/>
      <div class="fhui"@click="returnCity"><span class="iconfont icon-fanhui"></span></div>
      <div class="icon"><span class="iconfont icon-tupian"></span><em>21</em></div>
      <div class="ban-name">渔阳滑雪场(AAAA景区)</div>
      <div class=""></div>
    </div>
    <detail-gallary v-show="showDetail" @change="getClose"></detail-gallary>
  </div>
</template>
<script>
  import DetailGallary from '@/pages/Common/Gallary/Gallary.vue'
  export default{
    name:'Banner',
    components:{
      DetailGallary
    },
    data() {
        return{
          showDetail:false
        }
    },
    methods:{
      handleDetailClick(){
          this.showDetail=true;
      },
      getClose(res){
          this.showDetail=res;
      },
      returnCity(){
        this.$router.push('/') // 编程式路由
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .ban{
    position :relative;
    img{
      width:100%;
    }
    .fhui{
      position :absolute;
      left:.1rem;
      top:.1rem;
      width: .3 rem;
      height: .3rem;
      background-color :#000;
      border-radius:50%;
      text-align :center;
      line-height :.3rem;
      opacity :.6;
      .iconfont{
        color:white;
      }
    }
    .icon{
      width:.6rem;
      height:.2rem;
      background-color :#000;
      opacity:.6;
      border-radius:.2rem;
      text-align :center;
      line-height :.2rem;
      position :absolute;
      left:.1rem;
      bottom:.4rem;
      color:white;
      font-size:.12rem;
      span{
        margin-right:.05rem;
        font-size:.12rem;
      }
    }
    .ban-name{
      position:absolute;
      left:.1rem;
      bottom:.1rem;
      color:white;
      font-size:.18rem;
      text-shadow: 0 1px 2px rgba(0,0,0,0.70);
    }
  }
</style>

